<template>
  <div class="order">
    <!-- <h1>这是发货单总页面</h1> -->
    <!-- 书写标题头 -->
    <div class="order_title">
      <span class="one" @click="fanhui">&lt;</span>
      <span>商品订单</span>
    </div>
    <!-- 引入搜索框 -->
    <van-search
      v-model="SearchVal"
      placeholder="请输入搜索关键词"
      show-action
      action-text="搜索"
    />
    <!-- 引入tab切换 -->
    <van-tabs v-model="ActiveVal" color="#FFCC33" title-active-color="#003399">
      <van-tab title="全部">
        <OrderTabOne />
      </van-tab>
      <van-tab title="待发货">
        <OrderTabTwo />
      </van-tab>
      <van-tab title="待收货">
        <OrderTabThree />
      </van-tab>
      <van-tab title="评价">
        <OrderTabFour />
      </van-tab>
    </van-tabs>
    <!-- 引入的发货单添加信息的页面 -->
    <router-view></router-view>
  </div>
</template>

<script>
import OrderTabOne from "@/components/OrderTabOne";
import OrderTabTwo from "@/components/OrderTabTwo";
import OrderTabThree from "@/components/OrderTabThree";
import OrderTabFour from "@/components/OrderTabFour";
export default {
  data() {
    return {
      SearchVal: "",
      ActiveVal: 0,
    };
  },
  methods: {
    fanhui() {
      this.$router.go(-1);
    },
  },
  // created() {
  //   this.ActiveVal = this.ActiveVal;
  // },
  components: {
    OrderTabOne,
    OrderTabTwo,
    OrderTabThree,
    OrderTabFour,
  },
};
</script>
 
<style lang = "less" scoped>
/* 标题头的样式 */
.order_title {
  width: 100%;
  height: 0.5rem;
  background-color: #003399;
  text-align: center;
  line-height: 0.5rem;
  color: white;
  font-size: 0.18rem;
  padding-top: 0.1rem;
  .one {
    float: left;
    margin-left: 0.2rem;
  }
}
/* 搜索框样式 */
.van-search {
  border-bottom: 1px solid #eee;
  .van-search__content {
    border-radius: 0.15rem;
  }
  .van-search__action {
    color: #003399;
  }
}
</style>